<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <cpn></cpn>
    <cpn>
        <span slot="slot1">哈哈哈</span>
        <button slot="slot2">hhh</button>
    </cpn>
    <cpn></cpn>
</div>

<template id="cpn">
    <div>
        <h2>子组件</h2>
        <slot name="slot1">默认插槽1</slot>
        <slot name="slot2">默认插槽2</slot>
    </div>
</template>

<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！"
        },
        components:{
            cpn: {
                template: '#cpn'
            }
        }
    });
</script>
</body>
</html>